<template>
  <div class="tunnel-overview-panel">
    <div class="panel-title">隧道概况</div>
    <div class="echarts-box" ref="chartRef"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
import * as echarts from "@/plugins/echarts";

//echarts图表
const chartRef = ref(null);
let chartInstance = null;
const total = 190;
const data = [
  { value: 45, name: "特长隧道", color: "#4FC3F7" },
  { value: 27, name: "隧道群", color: "#FFD54F" },
];

function renderChart() {
  if (!chartRef.value) return;
  if (!chartInstance) {
    chartInstance = echarts.init(chartRef.value);
  }
  chartInstance.setOption({
    backgroundColor: "rgba(0,0,0,0)",
    tooltip: { show: false },
    legend: { show: false },
    series: [
      {
        type: "pie",
        radius: ["45%", "62%"], // 调整以适配直径117.3px
        center: ["50%", "50%"], // 居中
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: "outside",
          formatter: (params) => {
            return `{name|${params.name}}\n{value|${params.value}座}`;
          },
          rich: {
            name: {
              color: "#3ec6ff",
              fontSize: 14,
              fontWeight: "bold",
              align: "center",
              lineHeight: 18,
            },
            value: {
              color: "#fff",
              fontSize: 14,
              align: "center",
              lineHeight: 16,
            },
          },
          distanceToLabelLine: 2,
        },
        labelLine: {
          show: true,
          length: 10,
          length2: 16,
          lineStyle: {
            color: "#3ec6ff",
            width: 1,
          },
          maxSurfaceAngle: 60,
        },
        minShowLabelAngle: 0,
        data: data.map((item) => ({
          value: item.value,
          name: item.name,
          itemStyle: { color: item.color },
        })),
      },
    ],
    graphic: [
      {
        type: "text",
        left: "center",
        top: "38%",
        style: {
          text: "总隧道",
          textAlign: "center",
          fill: "#3ec6ff",
          fontSize: 14,
          fontWeight: "bold",
          lineHeight: 16,
        },
      },
      {
        type: "text",
        left: "center",
        top: "53%",
        style: {
          text: `${total}座`,
          textAlign: "center",
          fill: "#fff",
          fontSize: 18,
          fontWeight: "bold",
          lineHeight: 20,
        },
      },
    ],
  });
  chartInstance.resize();
}

onMounted(() => {
  nextTick(() => {
    renderChart();
    window.addEventListener("resize", renderChart);
  });
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", renderChart);
  chartInstance && chartInstance.dispose();
});
</script>

<style lang="scss" scoped>
.tunnel-overview-panel {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: rgba(10, 30, 60, 0.95);
  border: 1.5px solid #3ec6ff;
  border-radius: 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  
  .panel-title {
    background: url("@/assets/image/TunnelOverviewPanel/组 2.png") no-repeat center/cover;
    width: 452px;
    height: 43px;
    padding: 3px 0 25px 30px; /* 修改左边距，让标题靠左 */
    font-size: 18px;
    font-weight: bold;
    color: #fff; /* 修改颜色为设计图中的颜色 */
    text-align: left; /* 确保文本左对齐 */
    align-self: flex-start;
  }
  
  .echarts-box {
    width: 117.3px; /* 设置为固定宽度117.3px */
    height: 117.3px; /* 设置为固定高度117.3px */
    margin: 0 auto;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
